{% extends 'demos/live_demo.html.twig' %}

{% block demo_container %}

    <svg xmlns="http://www.w3.org/2000/svg" fill="none" display="none">
        <symbol id="svg-tshirt" viewBox="0 0 1274 1280">
              <path d="M502 143c-1 2-5 3-8 3-3 1-7 2-11 5-11 6-58 24-95 35-25 8-39 14-47 19-8 6-39 38-51 54l-26 34-25
              35-65 87a1267 1267 0 0 1-65 78c0 2 11 13 31 28a1375 1375 0 0 1 51 43 704 704 0 0 1 69 59l3 1 10-9a773 773
               0 0 0 41-39 674 674 0 0 1 49-44c1 0 1 1-1 51l-3 77a7291 7291 0 0 0-4 327 3255 3255 0 0 0-2 169c2 6 24 9
               81 9a980 980 0 0 1 110 5l14-1 23-1 25-1c27-2 36-2 48-1 13 2 32 2 83 0l106-2c77-1 82-1 87-4a1565 1565 0 0
                0 2-76 15728 15728 0 0 0-13-444c-2-70-2-98 0-99 1-1 3 1 11 8a261 261 0 0 0 32 27 323 323 0 0 1 44 39l8 6
                 3 4 4-3 10-7a411 411 0 0 1 29-26 767 767 0 0 1 81-66 277 277 0 0 1 28-24l-3-3c-4-3-16-18-33-40l-20-26-37-53a760
                 760 0 0 0-150-172c-4-5-20-12-36-17l-35-10a1330 1330 0 0 1-100-34c-6-3-11-3-15 1a224 224 0 0 1-119
                 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2z"/>
        </symbol>
    </svg>

    <div class="container container-xl mb-5">
        <twig:Browser
            url="/foo"
            class="shadow-blur shadow-blur--rainbow"
        >
            <twig:ProductGrid />
        </twig:Browser>
    </div>

    <section class="py-5" style="padding-top: 6rem;">
        <div class="container container-xxl">
            <twig:Code:CodeWithExplanationRow filename="src/Twig/Components/ProductGrid.php" reversed sticky style="--bs-gutter-x: 4rem;">
This component is quite standard: the page number as a `LiveProp`, a `LiveAction`
to load the next page, and a `getItems` method to retrieve the page results.

When called, the `LiveAction` simply increments the page number and renders again,
displaying the next page of results.

But... how can we `keep` the previous results instead of `replacing` them?
            </twig:Code:CodeWithExplanationRow>
        </div>
    </section>

    <section class="py-5">
        <div class="container container-xxl" style="--bs-gutter-x: 4rem;">
            <twig:Code:CodeWithExplanationRow filename="templates/components/ProductGrid.html.twig" sticky style="--bs-gutter-x: 4rem;">
The solution involves the use of `data-live-ignore` attributes, and just a little
bit of trickery in the `ProductGrid` component.

You just need to simulate the presence of the previous results in the HTML. The
empty `div` with the `data-live-ignore` attribute and previous page id (under the  🦊)
is enough to trick the `LiveComponent` into thinking that the previous results
are still there, and cannot be modified.

Then, instead of replacing the results, the `LiveComponent` will add the new ones in continuation!
            </twig:Code:CodeWithExplanationRow>
        </div>
    </section>

{% endblock %}
